html{
    min-height: 100%;
}
body{
    background: #304352;  /* fallback for old browsers */
    background: linear-gradient(to bottom, #647c8e, #c1bbb5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#box1{/* 主体 */
    position: absolute;
    top: 30px;
    left: 25%;
    width: 800px;
    height: 600px;
    /* border: 2px solid black; */
}
#box2,#box3{
    position: absolute;
}

#box2{/* 左半部分 */
    width: 330px;
    top: 0px;
    left: 0px;
    height: 100%;
    background: linear-gradient(to bottom,#d17d7d,#7070e9,#696565);
    animation: box2 1s;
}
@keyframes box2{
    0%{left: -150px;}
    100%{left: 0;}
}
#txt1{
    text-align: center;
    font-size: 50px;
    height: 150px;
    line-height: 150px;
}
#txt2{
    text-align: center;
    text-decoration-line: overline;
    text-decoration-style: dotted;
    text-decoration-color: aqua;
}
#box2 svg{
    display: block;
}
#img1{
    width: 263px;
    height: 130px;
    position: absolute;
    top: 300px;
    left: 10%;
}
#box1 a{
    position: absolute;
    top: 500px;
    left: 120px;
    color: #00ffff;
    text-decoration-line: none;
}

#box3{/* 右半部分 */
    height: 100%;
    top: 0px;
    right: 0px;
    position: absolute;
    width: 469px;
    background: lightblue;
    animation: box3 1.5s;
}
@keyframes box3{
    0%{right: -150px;}
    100%{right: 0;}
}
#txt3{
    position: absolute;
    left: 50px;
    top: 100px;
}
#btn1,#btn2,#input1,#input2{
    position: absolute;
}
#input1{
    right: 80px;
    top: 180px;
    width: 280px;
    height: 40px;
}
#input2{
    right: 80px;
    top: 260px;
    width: 280px;
    height: 40px;
}
#btn1{
    width: 60px;
    top: 125px;
    right: 80px;
}
#btn2{
    width: 70px;
    top: 350px;
    border-radius: 10px;
    right: 190px;
    font-size: 25px;
}
#box3 a{
    font-size: 20px;
    color: black;
    position: absolute;
    top: 450px;
    left: 160px;
    text-decoration-line: overline;
    text-decoration-style: double;
}
#box3 svg{
    position: absolute;
    bottom: 50px;
    display: none;
}
#icon1{
    left: 130px;
}
#icon2{
    left: 225px;
}
#icon3{
    left: 320px;
}

#box4{/* 下边部分 */
    width: 1000px;
    height: 95px;
    position: absolute;
    bottom: 0px;
    left: 25%;
}
#txt4,#txt5,#txt6{
   position: absolute;
   top: 30px;
   font-size: 15px;
   font-weight: 100;
}
#txt4{ 
    left: 0px;
}
#txt5{
    left: 550px;
}
#txt6{
    left: 700px;   
}

#box5{/* 弹出式注册页 */
    width: 400px;
    height: 350px;
    border-radius: 20px;
    position: absolute;
    background:linear-gradient(to bottom,rgb(248, 244, 244),rgb(5, 5, 5));
    z-index: 2;
    top: 155px;
    left: 600px;
    display: none;
    animation: box5 2.3s;
}
@keyframes box5{
    0%{top: -300px;}
    33.33%{top: 155px;}
    66.66%{top: 90px;}
    100%{top: 155px;}
}
#txt7,#input3,#input4,#input5,#btn3{
    position: absolute;
}
#txt7{
    left: 175px;
    top: 0px;
    font-size: 30px;
}
#input3,#input4,#input5{
    width: 260px;
    height: 30px;
    left: 65px;
    border-radius: 10px;
}
#input3{
    top: 80px;
}
#input4{
    top: 150px;
}
#input5{
    width: 120px;
    top: 220px;   
}
#btn3{
    top: 285px;
    left: 17%;
    width: 260px;
    height: 35px;
}
#btn4{
    width: 25px;
    position: absolute;
    top: 10px;
    right: 15px;
    border: 2px solid black;
    border-radius: 50%;
    text-align: center;
}